<template>
  <!--滚动表格-->
  <div class="table_scroll">
    <!--增加一个表头-->
    <el-table
      class="_table_header"
      v-if="!hideHeader"
      :header-cell-style="tableConfig.headerCellStyle"
      :style="{
        '--headerBGC': tableConfig.headerBGC,
        '--headerHeight': tableConfig.headerHeight
      }">
      <template v-for="(item, index) in columns">
        <template v-if="item.type==='index'">
          <el-table-column
            :key="index"
            :type="item.type"
            :index="item.index"
            :label="item.label"
            :width="item.width"
            :min-width="item.minWidth"
            :align="item.align"/>
        </template>
        <template v-else>
          <el-table-column
            :key="index"
            :label="item.label"
            :prop="item.prop"
            :width="item.width"
            :min-width="item.minWidth"
            :align="item.align"/>
        </template>
      </template>
    </el-table>
    <!--滚动的列表-->
    <vue-seamless
      class="auto_scroll_table"
      :data="data"
      :tooltip="tooltip"
      :class-option="classOption">
      <el-table
        ref="scroll_table"
        class="_table_header_hide"
        v-loading="loading"
        element-loading-text="加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.7)"
        :cell-style="tableConfig.cellStyle"
        :stripe="stripe"
        :data="data"
        :style="{
          '--rowHeight': tableConfig.rowHeight,
          '--rowBGC': tableConfig.rowBGC,
          '--stripeBGC': tableConfig.stripeBGC
        }"
        @row-click="rowClick">
          <template v-for="(item, index) in columns">
            <template v-if="item.type==='index'">
              <el-table-column
                :key="index"
                :type="item.type"
                :index="item.index"
                :label="item.label"
                :width="item.width"
                :min-width="item.minWidth"
                :align="item.align">
                <template slot-scope="scope">
                  <slot
                    :scope="scope"
                    :row="scope.row"
                    v-if="item.slot"
                    :name="item.slot"
                    :data="scope.row[item.slot]"
                  />
                </template>
              </el-table-column>
            </template>
            <template v-else>
              <template v-if="item.formatter">
                <el-table-column
                  :key="index"
                  :label="item.label"
                  :prop="item.prop"
                  :width="item.width"
                  :min-width="item.minWidth"
                  :align="item.align"
                  :show-overflow-tooltip="item.showOverflowTooltip"
                  :formatter="item.formatter"/>
              </template>
              <template v-else>
                <el-table-column
                  :key="index"
                  :label="item.label"
                  :prop="item.prop"
                  :width="item.width"
                  :min-width="item.minWidth"
                  :align="item.align"
                  :show-overflow-tooltip="item.showOverflowTooltip">
                  <template slot-scope="scope">
                    <slot
                      :scope="scope"
                      :row="scope.row"
                      v-if="item.slot"
                      :name="item.slot"
                      :data="scope.row[item.slot]"
                    />
                    <span v-else>{{ scope.row[item.prop] }}</span>
                  </template>
                </el-table-column>
              </template>
            </template>
          </template>
      </el-table>
    </vue-seamless>
  </div>
</template>

<script>
  import vueSeamless from './myClass'

  export default {
    name: 'index',
    components: {vueSeamless},
    props: {
      loading: {
        type: Boolean,
        default: false
      },
      hideHeader: {
        type: Boolean,
        default: false
      },
      tooltip: {
        type: Boolean,
        default: true
      }, // tooltip 文字提示
      stripe: {
        type: Boolean,
        default: true
      }, // 是否为斑马纹 table
      config: {
        type: Object,
        default: () => {
          return {}
        }
      },
      columns: {
        type: Array,
        required: true,
        validator: (cols) => {
          return cols.length >= 1 //表格至少需要1列
        }
      },
      data: {
        type: Array,
        default: () => {
          return []
        }
      },
      classOption: {
        type: Object,
        default: () => {
          return {}
        }
      }
    },
    data() {
      return {}
    },
    computed: {
      tableConfig() {
        const {config} = this
        return {
          headerBGC: config.headerBGC || 'rgba(0, 105, 255, 0.24)', // 表头背景色
          headerCellStyle: {
            'font-size': '18px', color: '#fff', 'font-family': 'PingFangSC',
            ...config.headerCellStyle
          }, // 表头行的 style
          cellStyle: {
            ...config.cellStyle
          },
          headerHeight: config.headerHeight || '50px', // 表头高度
          rowHeight: config.rowHeight || '40px', // 数据行高度
          rowBGC: config.rowBGC || 'rgba(0, 105, 255, 0.08)', // 数据行背景色
          stripeBGC: config.stripeBGC || 'rgba(0, 105, 255, 0.12)', // 斑马纹
        }
      },
      options() {
        const {classOption} = this

        return {
          step: classOption.step || 1, // 数值越大速度滚动越快 Number
          limitMoveNum: classOption.limitMoveNum || 5, // 开启无缝滚动的数据量 Number
          hoverStop: typeof (classOption.hoverStop) === 'boolean' ? classOption.hoverStop : true, // 是否启用鼠标hover控制 Boolean
          direction: classOption.direction || 1, // 方向 0 往下 1 往上 2向左 3向右 Number
          openTouch: typeof (classOption.openTouch) === 'boolean' ? classOption.autoPlay : true, // 移动端开启touch滑动 Boolean
          singleHeight: classOption.singleHeight || 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动)
          singleWidth: classOption.singleWidth || 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动)
          waitTime: classOption.waitTime || 1000, // 单步停止等待时间(默认值1000ms) Number
          switchOffset: classOption.switchOffset || 30, // 左右切换按钮距离左右边界的边距(px) Number
          autoPlay: typeof (classOption.autoPlay) === 'boolean' ? classOption.autoPlay : true, // 1.1.17版本前手动切换时候需要置为false Boolean
          switchSingleStep: classOption.switchSingleStep || 134, // 手动单步切换step值(px) Number
          switchDelay: classOption.switchDelay || 400, // 单步切换的动画时间(ms) Number
          switchDisabledClass: classOption.switchDisabledClass || 'disabled', // 不可以点击状态的switch按钮父元素的类名 String
          isSingleRemUnit: typeof (classOption.isSingleRemUnit) === 'boolean' ? classOption.isSingleRemUnit : false, // singleHeight and singleWidth是否开启rem度量 Boolean
          navigation: typeof (classOption.navigation) === 'boolean' ? classOption.navigation : false, // 左右方向的滚动是否显示控制器按钮，true的时候autoPlay自动变为false Boolean
        }
      }
    },
    mounted() {
      this.$nextTick(()=>{
        console.log(this.classOption)
      })
    },
    methods: {
      // 当某一行被点击时会触发该事件
      rowClick(row, column, event) {
        this.$emit('row-click', row, column, event)
      },
    }
  }
</script>

<style scoped lang="scss">
  .table_scroll {
    width: 100%;
    height: 100%;
    overflow: hidden;

    ::v-deep._table_header {
      background-color: var(--headerBGC) !important;
      overflow: hidden;
      height: var(--headerHeight);

      &:before {
        display: none;
      }

      tr {
        background-color: transparent !important;
      }

      .el-table__header-wrapper th {
        background-color: transparent !important;
      }

      .el-table__body-wrapper {
        display: none;
        overflow: hidden;
      }

      th.el-table__cell {
        border: none !important; padding: 0 !important; height: var(--headerHeight) !important;
        .cell { line-height: 1.2; padding-left: 6px !important; padding-right: 6px !important; }
      }
    }

    .auto_scroll_table {
      height: calc(100% - var(--headerHeight));
      overflow: hidden;
    }

    ::v-deep._table_header_hide {
      background-color: transparent !important;

      &:before {
        display: none;
      }

      .el-table__header-wrapper {
        display: none;
        overflow: hidden;
      }

      tr.el-table__row {
        background-color: transparent !important;
      }

      .el-table__body tr:hover > td.el-table__cell {
        background-color: transparent !important;
      }

      td.el-table__cell {
        color: #fff;
        font-size: 16px;
        padding: 0 !important;
        border-bottom: none !important;
        border-top: 2px solid transparent !important;

        .cell {
          height: var(--rowHeight);
          line-height: var(--rowHeight);
          background-color: var(--rowBGC) !important;
          padding-left: 6px !important; padding-right: 6px !important;
        }
      }

      .el-table__body tr.el-table__row--striped td.el-table__cell {
        background-color: transparent !important;

        .cell {
          background-color: var(--stripeBGC) !important;
        }
      }

      .el-tooltip {
        width: 100% !important;
      }
    }
  }
</style>
<style>
  .el-tooltip__popper { max-width: 500px;}
</style>
